<template>
	<!--  -->
	<view class="">
		<!-- 导航栏 -->
		<view class="day">
			<view>
				<image @click="goOne" class="img2" src="../../static/左键.png"></image>
				<image class="img" src="../../static/w6.png" mode="aspectFill"></image>
				<view class="wenzi ">
					<text>小瑶</text>
				</view>
			</view>
			<view class="single-box" v-for="(item,index) in gzData">
				<view class="icon-box">
					<view class="icon-single" @click="getGz(index)">
						<image :src="item.gzimg" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<image class="img1" @click="shareToggle"  src="../../static/分享.png" mode=""></image>
		</view>
		<!-- 轮播图 -->
		<view class="">
			<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
				<swiper class="swiper-box" @change="change">
					<swiper-item v-for="(item ,index) in info" :key="index">
						<view class="swiper-itme">
							<image :src="item.content" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="wenan">
			<text>秋天复古电影感滤镜，一些回忆片段</text>
			<view class="shijian">
				<p>2021-12-05 17:28</p>
				<view>
					<image src="../../static/不喜欢.png" mode=""></image>
					<text>不喜欢</text>
				</view>
			</view>
		</view>
		<hr>
		<!-- 评论 -->
		<view id="middle" v-for="item in middleData">
			<view class="box-comments">
				<view class="comments">
					<div>
						<p>{{item.comments}}</p>
					</div>
					<div>
						<p>{{item.commentsNumber}}</p>
					</div>
				</view>
				<view class="comments1" v-for="i in item.commentsData">
					<div>
						<image :src="i.commentsHeadPortrait" mode="aspectFill"></image>
					</div>
					<div>
						<p>{{i.commentsNickname}}</p>
						<p>{{i.commentsTalk}}</p>
						<p>{{i.commentsDate}}</p>
					</div>
					<div>
						<image v-show="i.commentsGiveLickAdd==true"
							@click="i.commentsGiveLickAdd=!i.commentsGiveLickAdd;i.commentsGiveLickNumber--"
							:src="i.commentsGiveLick" mode="aspectFit"></image>
						<image v-show="i.commentsGiveLickAdd==false"
							@click="i.commentsGiveLickAdd=!i.commentsGiveLickAdd;i.commentsGiveLickNumber++"
							:src="i.commentsGiveLick2" mode="aspectFit"></image>
						<p>{{i.commentsGiveLickNumber}}</p>
					</div>
				</view>
			</view>
		</view>
		<view class="comment">
			<view class="yaya">
				<input type="text" v-model="usersay"  placeholder="  说点什么..." >
				<!-- <button  @click="sendUsersay"></button> -->
				<image @click="sendUsersay" src="../../static/发送(1).png" mode=""></image>
			</view>
			<view class="single" v-for="(item,index) in plData">
				<view class="icon">
					<view class="icon-single" @click="getDz(index)">
						<image :src="item.dzimg" mode="widthFix"></image>
						<text>{{item.dznum}}</text>
					</view>
					<view class="icon-single" @click="getSc(index)">
						<image :src="item.scimg" mode="widthFix"></image>
						<text>{{item.scnum}}</text>
					</view>
					<view class="icon-single">
						<image :src="item.plimg" mode="widthFix"></image>
						<text>{{item.plnum}}</text>
					</view>
				</view>
			</view>
		</view>
		<view>
			<!-- 分享示例 -->
			<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
				<uni-popup-share></uni-popup-share>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				usersay: "",
				gzData: [{
					gzimg: "/static/加关注.png",
				}],
				plData: [{
					dzimg: "/static/收藏oo.png",
					dznum: 1000,
					scimg: "/static/星星1.png",
					scnum: 200,
					plimg: "/static/消息5.png",
					plnum: 400
				}],
				info: [{
						content: '../../static/a1.png'
					},
					{
						content: '../../static/a2.png'
					},
					{
						content: '../../static/a3.png'
					},
					{
						content: '../../static/a4.png'
					},
					{
						content: '../../static/a5.png'
					},
					{
						content: '../../static/a6.png'
					},
					{
						content: '../../static/a7.png'
					}, {
						content: '../../static/a8.png'
					}, {
						content: '../../static/a9.png'
					}
				],
				current: 0,
				mode: 'dot',
				middleData: [{
					comments: '评论',
					commentsNumber: '共4条评论',
					commentsData: [{
							commentsGiveLickAdd: false,
							commentsHeadPortrait: '/static/w7.png',
							commentsNickname: 'Eliauk',
							commentsTalk: '被模特小姐圈粉。拍得也好好，喜欢！',
							commentsDate: '03-12',
							commentsGiveLick: '/static/收藏o.png',
							commentsGiveLick2: '/static/收藏oo.png',
							commentsGiveLickNumber: '69',
						},
						{
							commentsGiveLickAdd: false,
							commentsHeadPortrait: '/static/w8.png',
							commentsNickname: '追风人',
							commentsTalk: '马上分享给我的手残男友看，喜欢！',
							commentsDate: '04-28',
							commentsGiveLick: '/static/收藏o.png',
							commentsGiveLick2: '/static/收藏oo.png',
							commentsGiveLickNumber: '32',
						},
						{
							commentsGiveLickAdd: false,
							commentsHeadPortrait: '/static/w9.png',
							commentsNickname: '是暖暖呀~',
							commentsTalk: '啊吧啊吧啊吧啊吧啊吧，嘿嘿。喜欢',
							commentsDate: '04-30',
							commentsGiveLick: '/static/收藏o.png',
							commentsGiveLick2: '/static/收藏oo.png',
							commentsGiveLickNumber: '89',
						},
						{
							commentsGiveLickAdd: false,
							commentsHeadPortrait: '/static/w10.png',
							commentsNickname: '小girl',
							commentsTalk: '被模特小姐圈粉,吧啊吧啊，喜欢！',
							commentsDate: '05-12',
							commentsGiveLick: '/static/收藏o.png',
							commentsGiveLick2: '/static/收藏oo.png',
							commentsGiveLickNumber: '46',
						},
					],
				}]
			}
		},
		methods: {
			shareToggle() {
				this.$refs.share.open()
			},
			sendUsersay() {
				console.log(this.middleData[0].commentsData);
				this.middleData[0].commentsData.unshift({
					commentsGiveLickAdd: false,
					commentsHeadPortrait: '/static/w6.png',
					commentsNickname: '小瑶',
					commentsTalk:this.usersay,
					commentsDate: '05-12',
					commentsGiveLick: '/static/收藏o.png',
					commentsGiveLick2: '/static/收藏oo.png',
					commentsGiveLickNumber: 0,
				})
			},
			getGz(index) {
				if (this.gzData[index].gzimg == "/static/加关注.png") {
					this.gzData[index].gzimg = "/static/已关注.png"
				} else {
					this.gzData[index].gzimg = "/static/加关注.png"
				}
			},
			getDz(index) {
				if (this.plData[index].dzimg == "/static/收藏oo.png") {
					this.plData[index].dzimg = "/static/收藏o.png"
					this.plData[index].dznum++
				} else {
					this.plData[index].dzimg = "/static/收藏oo.png"
					this.plData[index].dznum--
				}
			},
			getSc(index) {
				if (this.plData[index].scimg == "/static/星星1.png") {
					this.plData[index].scimg = "/static/星星2.png"
					this.plData[index].scnum++
				} else {
					this.plData[index].scimg = "/static/星星1.png"
					this.plData[index].scnum--
				}
			},
			change(e) {
				this.current = e.detail.current
			},
			goOne() {
				uni.switchTab({
					url: "../index/index"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "set.scss"
</style>
<style>
	page {
		background-color: #ffffff;
	}
</style>
